<template>
  <view :style="'padding-bottom:'+bottomArea+'px'">
    <view
      class="level-box"
      @click.stop="toPointsRecordsFn"
    >
      <view class="level-bg"><image :src="vuex_imgPath+'/level-bg.png'" /></view>
      <view class="head-pic"><image :src="vuex_memberInfo.headPicPath || (vuex_imgPath+'/avatar_icon.png')" /></view>
      <view class="name">{{ vuex_memberLevelResp.levelName }}</view>
      <view class="available-box">
        <view class="time my-integarl">可用积分：<text>{{ waitIntegral }}</text></view>
        <view class="xin-coin">可用鑫币：<text>{{ waitCoin }}</text></view>
      </view>
      <view class="more font_family icon-a-arrowright_tongyong_2" />
      <view class="into-btn">
        <button @click.stop="toExchangeRecordsFn">
          <image src="/myAccount/static/image/level-button01.png" />
          兑换订单
        </button>
        <button @click.stop="toExchangeRuleFn">
          <image src="/myAccount/static/image/level-button02.png" />
          兑换规则
        </button>
      </view>

    </view>
    <view class="gift-list">
      <view class="zone-tabbox">
        <view @click.stop="changeTabFn(1)">
          <text v-if="exchangeType == 0" class="xincoin-icon-no font_family icon-xinbi_tongyong_1" />
          <text v-if="exchangeType == 1" class="xincoin-icon font_family icon-xinbi_tongyong_1" />
          <text :class="exchangeType == 1?'zone-active':''">鑫币专区</text>
        </view>
        <view @click.stop="changeTabFn(0)">
          <text v-if="exchangeType == 0" class="integral-icon-no font_family icon-jifen_tongyong_1" />
          <text v-if="exchangeType == 1" class="integral-icon font_family icon-jifen_tongyong_1" />
          <text :class="exchangeType == 0?'zone-active':''">积分专区</text>
        </view>

      </view>
      <view v-if="cateGoryList.length >0" class="oneCategory-box">
        <scroll-view class="show-category-con" scroll-x="true" :scroll-left="`${rightMove}`">
          <text :class="categorySelected == -1 ? 'isactive' :''" class="all" @click="changeCateGoryFn()">全部商品</text>
          <view v-for="(item, index) in cateGoryList" :key="index" class="show-category-box">
            <view :class="categorySelected == index ? 'isactive' :'' ">
              <text @click="changeCateGoryFn(item,index,'popup')">{{ item.name }}</text>
            </view>
          </view>
        </scroll-view>
        <!--向左移动170rpx，倒数第1个移动少（170*3-88）=422rpx，倒数第2移动少252，倒数第3个移动少82-->
        <view class="more-img" @click="showCategoryFn()">
          <text class="icon font_family icon-a-arrowdown_tongyong_1" />
        </view>
      </view>
      <basePage :page-params="pageParams">
        <view class="gift-list-ul">
          <view
            v-for="(item, index) in pointsGoodsList"
            :key="index"
            class="gift-info"
            @click="toPointsGoodsDetailFn(item)"
          >
            <view class="pic"><image :src="item.productImages" /></view>
            <view class="name">{{ item.skuName }}</view>
            <view class="number">
              {{ exchangeType!=0?'￥':'' }}
              <text class="text">{{ exchangeType== 0? item.needIntegral: item.needCoin }}</text>
              {{ exchangeType==0?'积分':'' }}
            </view>
          </view>
        </view>
        <view class="u-p-b-40">
          <u-loadmore :status="status" />
        </view>
      </basePage>
    </view>

    <!-- 分类弹框 -->
    <view v-if="cateGoryList.length >0" class="u-pop-sort" @close="cateGoryclose" @open="cateGoryopen">
      <u-popup :show="cateGoryshow" mode="top" @close="cateGoryclose" @open="cateGoryopen">
        <view class="pop-sort">
          <text :class="categorySelected == -1 ? 'isactive' :''" class="sort-all" @click="changeCateGoryFn()">全部商品</text>
          <view v-for="(item, index) in cateGoryList" :key="index" class="show-category-box">
            <view :class="categorySelected == index ? 'isactive' :'' ">
              <text @click="changeCateGoryFn(item,index,'popup')">{{ item.name }}</text>
            </view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import {
  getLoginInfoFn,
  setPageParamsFn
} from '@/common/common'
import { searchFrontIntegralShoppingMsg, queryCoin, getCategoryList } from '@/api/yc_userInfo'
import basePage from '@/components/base-page';
export default {
  name: 'Index',
  components: { basePage },
  // #ifdef MP-WEIXIN
  options: {
    styleIsolation: 'shared' // 小程序配置 - 解除样式隔离
  },
  // #endif
  data() {
    return {
      cateGoryList: [],
      cateGoryshow: false,
      oneCategoryId: '',
      pointsDetail: {}, // 礼品商城数据
      pointsGoodsList: [], // 积分商品列表
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
      page: 1,
      pageSize: 20,
      totalPages: 0,
      status: 'loading',
      bottomArea: 0,
      waitIntegral: 0, //可用积分
      waitCoin: 0, //可用鑫币
      exchangeType: 1, //兑换类型[0:积分兑换，1:鑫币兑换]
      categorySelected: -1, //当前选中的分类
      rightMove: 0, //向右移动的像素
      cityCode: '', //查询需要销售区域字段
      warehouseCode: '', //查询需要仓
    }
  },
  onLoad() {
    // #ifdef MP-ALIPAY || MP-WEIXIN
    this.cityCode = this.vuex_cityInfo.cityCode
    this.warehouseCode = this.vuex_cityInfo.warehouseCode
    // #endif
    //#ifdef H5
    const mySelectStation = JSON.parse(localStorage.getItem('my_select_station'))
    this.cityCode = mySelectStation.cityCode
    this.warehouseCode = mySelectStation.warehouseCode
    // #endif
    if (!this.vuex_loginStatus) {
      // #ifdef MP-ALIPAY || MP-WEIXIN
      uni.navigateTo({
        url: `/login/login/codeLogin`
      })
      // #endif
      //#ifdef H5
      uni.navigateTo({
        url: `/login/login/mCodeLogin`
      })
      // #endif
      return false
    }
    this.getMemberInfoFn()
    this.searchFrontIntegralShoppingMsgFn()
    // #ifdef MP-WEIXIN
    this.getBottomAreaFn() //支付宝报错此方法所以注销
    // #endif
    this.queryCoinFn()
    this.oneCategoryFn(this.exchangeType)
  },
  onReachBottom() {
    if (this.pageParams.state == 'EMPTY') {
      this.page = 1
    } else {
      this.page++
    }
    if (this.page > this.totalPages) {
      this.status = ''
      return
    }
    this.searchFrontIntegralShoppingMsgFn()
  },
  methods: {
    cateGoryopen() {
      // console.log('open');
    },
    cateGoryclose() {
      this.cateGoryshow = false
      // console.log('close');
    },
    showCategoryFn() {
      this.cateGoryshow = true
    },
    oneCategoryFn(exchangeType) {
      const params = {
        categoryType: exchangeType // 分类类型：1：礼品商城 0：积分商城，不传则查询两种分类
      }
      getCategoryList(params).then((res) => {
        if (res.code == 0) {
          exchangeType == 1 ? this.cateGoryList = (res.data.coinCategoryList ? res.data.coinCategoryList : []) : this.cateGoryList = (res.data.integralCategoryList ? res.data.integralCategoryList : [])
        }
      })
    },
    changeCateGoryFn(item, index, typepopup) {
      this.oneCategoryId = ''
      item ? this.oneCategoryId = item.code : ''
      this.page = 1
      if (!item) {
        this.categorySelected = -1
      } else {
        this.categorySelected = index
      }
      if ((typepopup && typepopup == 'popup') || (this.categorySelected == -1)) { this.cateGoryshow = false }
      if (index == 0) {
        this.rightMove = '170rpx'
      } else if (!index) {
        this.rightMove = 0
      } else {
        this.rightMove = (index * 170) + 170 + 'rpx'
        console.log('向右', this.cateGoryList.length, this.rightMove)
      }

      this.searchFrontIntegralShoppingMsgFn()
    },
    /* 切换专区*/
    changeTabFn(type) {
      this.oneCategoryId = ''
      this.exchangeType = type
      this.page = 1

      this.categorySelected = -1
      this.rightMove = 0

      this.oneCategoryFn(this.exchangeType)
      this.searchFrontIntegralShoppingMsgFn()
    },
    /*底部安全距离设置*/
    getBottomAreaFn() {
      this.bottomArea = this.vuex_systemInfo[1].safeAreaInsets.bottom
    },
    /*获取会员信息 vuex_memberLevelResp*/
    getMemberInfoFn() {
      getLoginInfoFn(this.vuex_memberInfo.memberId)
    },
    /*获取会员信息 vuex_memberLevelResp*/
    async searchFrontIntegralShoppingMsgFn() {
      this.status = 'loading'
      console.log('区域', this.cityCode)
      const params = {
        'nowPage': this.page,
        'pageSize': this.pageSize,
        'sort': 1,
        'exchangeType': this.exchangeType,
        'oneCategoryId': this.oneCategoryId,
        'cityCode': this.cityCode,
        'warehouseCode': this.warehouseCode
      }
      const res = await searchFrontIntegralShoppingMsg(params)
      this.status = ''
      if (res.code != 0) {
        this.$u.toast(res.msg)
        return
      }
      if (!res.data.data || (this.page == 1 && res.data.data.length == 0)) {
        setPageParamsFn(this, 'EMPTY', '矮油，这里空空如也~', false)
        return
      }
      if (res.data.data.length == 0) {
        return
      }
      this.pointsDetail = res.data
      if (this.page == 1) {
        setPageParamsFn(this, null)
        this.pointsGoodsList = res.data.data
      } else {
        setPageParamsFn(this, null)
        this.pointsGoodsList.push(...res.data.data)
      }
      console.log(this.pointsGoodsList)
      this.totalPages = res.data.pageCount
      if (res.data.rowCount <= this.pageSize) {
        this.status = 'nomore'
      }
    },
    /*跳转积分记录*/
    toPointsRecordsFn() {
      uni.navigateTo({ url: '/myAccount/pointsMall/pointsRecords' })
    },
    /*跳转兑换订单*/
    toExchangeRecordsFn() {
      uni.navigateTo({ url: '/myAccount/pointsMall/exchangeRecords' })
    },
    /*跳转兑换规则*/
    toExchangeRuleFn() {
      uni.navigateTo({ url: '/myAccount/pointsMall/exchangeRule' })
    },
    /*跳转订单商品详情*/
    toPointsGoodsDetailFn({ skuId }) {
      console.log(this.exchangeType)
      let title = 0
      if (this.exchangeType == 1) {
        title = 1
      }
      uni.navigateTo({ url: `/myAccount/pointsMall/pointsGoodsDetail?skuId=${skuId}&title=${title}&exchangeType=${this.exchangeType}` })
    },
    queryCoinFn() {
      const params = {
        memberId: this.vuex_memberInfo.memberId
      }
      queryCoin(params).then((res) => {
        if (Number(res.code) == 0) {
          this.waitIntegral = res.data.waitIntegral
          this.waitCoin = res.data.waitCoin
        } else {
          this.$u.toast(res.message)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.level-box{
  width:686rpx;
  height: 224rpx;
  position: relative;
  margin:48rpx auto 0;
  color: $uni-text-color-inverse;
  font-size: $uni-font-size-sm;
  .level-bg{
    width: 686rpx;
    height: 224rpx;
    position: absolute;
    top:0;
    left: 0;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .head-pic{
    width: 120rpx;
    height: 120rpx;
    position: absolute;
    top:16rpx;
    left: 24rpx;
    border-radius: 120rpx;
    overflow: hidden;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .name{
    padding:34rpx 0 0 168rpx;
    font-size:$uni-font-size-lg;
    font-weight: bold;
    position: relative;
    z-index: 1;
  }
  .time{
    padding: 6rpx 0 0 168rpx;
  }
  .available-box{
    display: flex;
    position: relative;
    z-index: 1;
    .xin-coin{
      padding: 6rpx 0 0 24rpx;
      }
  }
  .more{
    position: absolute;
    right: 24rpx;
    top:60rpx;
    font-size: $uni-font-size-sm;
    color: $uni-text-color-inverse;
  }
  .into-btn{
    display:flex;
    flex-direction: row;
    justify-content:center;
    position: relative;
    z-index: 1;
    button{
      box-sizing:border-box;
      height: 56rpx;
      border-radius: 8ppx;
      border: 2rpx solid #fff;
      background: linear-gradient(229.2deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5) 100%);
      line-height: 56rpx;
      padding: 0 80rpx;
      margin: 32rpx 7rpx 0;
      white-space: nowrap;
      font-size: $uni-font-size-base;
      image{
        width: 32rpx;
        height:32rpx;
        margin-right: 8rpx;
        position: relative;
        top:5rpx;
      }
    }
  }

}
.gift-list{
  .title{
    font-size: $uni-font-size-base;
    font-weight: bold;
    text-align: center;
    padding: 32rpx 0 8rpx;
    image{
      width: 24rpx;
      height: 20rpx;
      margin: 0 8rpx;
    }
  }
  .gift-list-ul{
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
    padding: 0 0 0 14rpx;
    .gift-info{
      overflow: hidden;
      margin:16rpx 0 0 18rpx;
      width: 334rpx;
      height: 492rpx;
      background: $uni-bg-color;
      border-radius: $uni-border-radius-default;
      .pic{
        width: 334rpx;
        height: 334rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
      .name{
        font-size: $uni-font-size-base;
        margin: 16rpx 24rpx 0 24rpx;
        height:72rpx;
        line-height: 36rpx;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
      }
      .number{
        margin: 16rpx 24rpx 0;
        color: $uni-orange;
        font-size: $uni-font-size-sm;
        .text{
          font-size: $uni-font-size-lg;
          font-weight: bold;
        }
      }
    }
  }
  .zone-tabbox{
    height: 88rpx;
    display: flex;
    line-height: 88rpx;
    text-align: center;
    margin: 24rpx 0 16rpx 0;
    background: $uni-bg-color;
    .zone-active{
      color: $uni-orange !important
    }
    view{
      width: 374rpx;
      height: 88rpx;
      line-height: 88rpx;
      text{
        height: 40rpx;
        opacity: 1;
        font-weight: 400;
        text-align: left;
        color:$uni-text-color;
        font-size:$uni-font-size-base;
      }
      .font_family{
        font-size: 38rpx;
        position: relative;
        top:4rpx;
      }
      .xincoin-icon,.integral-icon-no{
        color: $uni-orange;
      }
    }
  }
  .oneCategory-box{
    height: 66rpx;
    padding: 0 0 12rpx 32rpx;
    position:relative;
    .show-category-con{
      white-space: nowrap;
      padding-right:88rpx;
      width: calc(100% - 88rpx);
      overflow-x: auto;
      height: 66rpx;
      overflow-y: hidden;
      position: relative;
      .all.isactive{
        border: 2rpx solid #f53;
        height: 56rpx;
        border-radius:$uni-border-radius-default;
        color:$uni-text-color-orange;
        }
      .all,.show-category-box{
        display: inline-block;
        height: 60rpx;
        line-height: 60rpx;
        width: 154rpx;
        margin-right: 16rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 2rpx solid #fff;
        text-align: center;
        color: $uni-text-color;
        background:$uni-bg-color;
        font-size:$uni-font-size-sm;
        border-radius:$uni-border-radius-default;
        .isactive{
          border: 2rpx solid #f53;
          height: 56rpx;
          color:$uni-text-color-orange;
          border-radius:$uni-border-radius-default;
        }
      }
    }
    .more-img{
      position: absolute;
      width: 120rpx;
      height: 88rpx;
      right:0;
      top:-12rpx;
      background: linear-gradient(270deg, #F5F5F5 72.5%, rgba(245, 245, 245, 0) 100%);
      text-align: center;
      .icon{
        width: 56rpx;
        height: 56rpx;
        position: absolute;
        line-height: 56rpx;
        overflow:hidden;
        top:16rpx;
        left: 32rpx;
        background:$uni-bg-color;
        border-radius:$uni-border-radius-circle;
      }
    }
  }
}
.u-pop-sort{
  /deep/ .u-popup__content{
    background:$uni-f5bg-color;
    border-radius: 0 0 16rpx 16rpx;
    padding:32rpx 0 0 32rpx;
  }
}
.pop-sort{
  display: flex;
  flex-wrap:wrap;
  .sort-all,.show-category-box{
    display: inline-block;
    margin-bottom: 16rpx;
    height: 60rpx;
    line-height: 60rpx;
    width: 154rpx;
    border: 2rpx solid #fff;
    text-align: center;
    margin-right: 16rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: $uni-text-color;
    border-radius:$uni-border-radius-default;
    background:$uni-bg-color;
    font-size:$uni-font-size-sm;
      .isactive{
        border: 2rpx solid #f53;
        height: 56rpx;
        color:$uni-text-color-orange;
        border-radius:$uni-border-radius-default;
        }
  }
  .sort-all.isactive{
    border: 2rpx solid #f53;
    height: 56rpx;
    color:$uni-text-color-orange;
    border-radius:$uni-border-radius-default;
    }
  .sort-all.hover,.show-category-box.hover{
    border-color: #f53;
    color:$uni-text-color-orange;
  }
}
</style>
